<template>
  <el-container>
    <!--  左边树节点  -->
    <el-container style="width: 17%;">
      <el-header style="width: 100%;">
        <el-input placeholder="请输入内容" size="medium" prefix-icon="el-icon-search" v-model="orgName"></el-input>
      </el-header>
      <el-main>
        <el-tree :data="data" :props="defaultProps"></el-tree>
      </el-main>
    </el-container>
    <!--  右边数据表格  -->
    <el-container style="width: 82%;">
      <el-header>
        <el-row :gutter="15">
          <el-col :span="4">
            <el-select v-model="selectValue" @change="queryData" placeholder="请选择使用公司">
              <el-option v-for="item in terminalOrgNames" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-table :data="testData" style="width: 100%" height="100%" border :cell-style="{'text-align': 'center'}">
          <el-table-column prop="f_userinfo_code" label="用户编号"></el-table-column>
          <el-table-column prop="f_user_name" label="用户姓名"></el-table-column>
          <el-table-column prop="f_meter_classify" label="气表类型"></el-table-column>
          <el-table-column prop="f_card_id" label="用户卡号"></el-table-column>
          <el-table-column prop="f_alias" label="气表别名"></el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Deploy',
  methods: {
    // 查询用户数据
    queryData () {
      // 组织查询条件
      let condition = 'f.f_meter_classify like \'%' + this.selectValue + '\''
      if (this.selectValue === '卡表') {
        condition += 'and f_card_id is not null'
      }
      let that = this
      // 查询
      this.axios.post('/sql/getTestData', {'data': {'condition': condition}})
        .then(function (response) {
          that.testData = response.data
        }).catch(function (error) {
          Math.max()
          that.$message.error('数据加载失败!错误码:PAY10086' + error)
        })
    }
  },
  data () {
    return {
      orgName: '',
      // 表格数据
      testData: [],
      data: [
        {
          label: '一级 1'
        },
        {
          label: '一级 2'
        },
        {
          label: '一级 3'
        }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 下拉框选择条件
      terminalOrgNames: [
        {
          label: '卡表',
          value: '卡表'
        },
        {
          label: '机表',
          value: '机表'
        },
        {
          label: '物联网表',
          value: '物联网表'
        }
      ],
      selectValue: '卡表',
      formLabelWidth: '120px'
    }
  },
  mounted () {
    this.queryData()
  }
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 40px;
  line-height: 30px;
  text-align: center;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
